<template>
	<view class="container">
		<view class="content">
			<view class="card_box" v-if="orderDetailsFnc.source == 1">
				<template v-if="identity === 1">
					<view class="order_data_info_box">
						<view class="order_data_info">
							<view class="order_data_label">工作室推广收入：</view>
							<view class="order_data_value">
								¥{{ orderDetailsFnc?.orderData?.promotionSharingVO?.studioSharing }}</view>
						</view>
						<view class="order_data_info user_income">
							<view class="order_data_label">
								<image class="studio_img"
									:src="orderDetailsFnc.orderData?.promotionSharingVO?.promotionAvatar"></image>
								<view>{{ orderDetailsFnc.orderData?.promotionSharingVO?.promotionNickName }}（推广人）</view>
							</view>
							<view class="order_data_value">
								¥{{ orderDetailsFnc.orderData?.promotionSharingVO?.promotionSharing }}</view>
						</view>
					</view>
				</template>
				<template v-if="identity === 0">
					<view class="order_data_info_box">
						<view class="order_data_info">
							<view class="order_data_label">我的推广收入：</view>
							<view class="order_data_value">
								¥{{ orderDetailsFnc.orderData?.promotionSharingVO?.promotionSharing }}</view>
						</view>
					</view>
				</template>
			</view>
			<view class="card_box receiving_address">
				<view class="receiving_address_left">
					<image :src="iconUrl + '92.png'" mode=""></image>
				</view>
				<view class="receiving_address_right">
					<view class="receiving_address_text">
						<view class="receiving_address_text_left"
							:class="!orderDetailsFnc.addressInfo.isShowUpdateAddressBtn ? 'receiving_address_text_left_width' : ''">
							{{ orderDetailsFnc.addressInfo.receiverProvince }}
							{{ orderDetailsFnc.addressInfo.receiverCity }}
							{{ orderDetailsFnc.addressInfo.receiverArea }}
							{{ orderDetailsFnc.addressInfo.receiverLocationAddress }}
							{{ orderDetailsFnc.addressInfo.receiverAddress }}
						</view>
						<view class="receiving_address_text_right"
							v-if="orderDetailsFnc.addressInfo.isShowUpdateAddressBtn"
							@tap="orderDetailsFnc.goModifyAddress">
							修改
							<uni-icons type="right" size="12" color="#FF6084"></uni-icons>
						</view>
					</view>
					<view class="receiving_address_user">
						{{ orderDetailsFnc.addressInfo.receiverName }}
						{{ orderDetailsFnc.addressInfo.receiverMobile }}
					</view>
					<view class="receiving_address_tips"
						v-if="[0, 1, 2, '0', '1', '2'].includes(orderDetailsFnc.addressInfo.updateAddressStatus)"
						@tap="orderDetailsFnc.goModifyAddressDetails">
						<view class="" v-if="orderDetailsFnc.addressInfo.updateAddressStatus == 0">商家正在审核，请耐心等待</view>
						<view class="" v-if="orderDetailsFnc.addressInfo.updateAddressStatus == 1">修改成功：您已成功修改地址</view>
						<view class="" v-if="orderDetailsFnc.addressInfo.updateAddressStatus == 2">
							修改失败：{{ orderDetailsFnc.addressInfo.updateAddressReason }}</view>
						<uni-icons type="right" size="12" color="#FF6084"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card_box remark"
				v-if="orderDetailsFnc.orderData.remark && orderDetailsFnc.orderData.status != 0">
				<view class="remark_tips">备注</view>
				<view class="remark_content">{{ orderDetailsFnc.orderData.remark }}</view>
			</view>
			<view class="card_box logistics_info" v-if="orderDetailsFnc.orderData.logisticoLcus != null"
				@tap="orderBtnFnc.seeLogistics(orderDetailsFnc.orderData.id)">
				<view class="logistics_info_text">
					<image class="logistics_info_icon" :src="iconUrl + '184.png'" mode=""></image>
					<template v-if="orderDetailsFnc.orderData.logisticoLcus.length != 0">
						<view class="logistics_info_left">
							<view class="logistics_info_tips">{{ orderDetailsFnc.orderData.logisticoLcus[0].name }}
							</view>
							<view class="logistics_info_split"></view>
							<view class="logistics_info_content">
								{{ orderDetailsFnc.orderData.logisticoLcus[0].logisticCode }}
							</view>
						</view>

						<uni-icons type="right" size="12" color="#FF6084"></uni-icons>
					</template>
					<template v-else>
						<view class="logistics_info_tips">暂无物流信息</view>
					</template>
				</view>
				<view class="logistics_info_times">{{ orderDetailsFnc.orderData.logisticoLcus[0].deliveryTime }}</view>
			</view>
			<view class="card_box goods_box"
				v-for="(goodsItem, goodsIndex) in orderDetailsFnc.orderData.orderGoodsBrandsVO" :key="goodsIndex">
				<view class="shop_name">
					<image :src="goodsItem.brandsLogo" mode=""></image>
					<text>{{ goodsItem.brandsName }}</text>
				</view>
				<view class="goods_info">
					<view class="goods_info_item" v-for="(infoItem, infoIndex) in goodsItem.orderGoods"
						:key="infoIndex">
						<view class="goods_info_item_img">
							<image :src="infoItem.thumPic" mode=""></image>
						</view>
						<view class="goods_info_item_text">
							<view class="goods_info_item_text_name">
								<view class="goods_info_item_text_name_tips">
									<text class="" v-if="infoItem.presellOn == 1">预售</text>{{infoItem.name}}
								</view>
								<text class="item_text_price">¥{{ infoItem.price }}</text>
							</view>
							<view class="goods_info_item_text_specs">
								<view class="" v-if="infoItem.skuProperties">
									<text v-for="(items, index) in JSON.parse(infoItem.skuProperties)" :key="index">
										{{ items.value }}
										<text class="m-l-10 m-r-10"
											v-if="JSON.parse(infoItem.skuProperties).length - 1 != index">;</text>
									</text>
								</view>
								<view class="" v-else>默认规格</view>
								<text>×{{ infoItem.count }}</text>
							</view>
							<view class="goods_info_item_text_times">
								{{ deliveryDate(infoItem) }}
							</view>
						</view>
					</view>
				</view>
				<view class="goods_bottom_item shipping_fee" v-if="orderDetailsFnc.orderData.status == 0">
					<view class="goods_bottom_item_label color7c">运费</view>
					<view class="goods_bottom_item_value color1a">
						<!-- <text class="color7c">¥25</text> -->
						¥{{ goodsItem.expressFee }}
					</view>
				</view>
				<view class="goods_bottom_item order_notes"
					v-if="goodsItem.remark && orderDetailsFnc.orderData.status == 0">
					<view class="goods_bottom_item_label color80">备注</view>
					<view class="goods_bottom_item_value color80">{{ goodsItem.remark }}</view>
				</view>
			</view>

			<view class="card_box order_amount">
				<view class="order_amount_item mt24">
					<view class="order_amount_item_label">商品总额</view>
					<view class="order_amount_item_value fontblod">¥{{ Number(orderDetailsFnc.orderData.goodsMoney) }}
					</view>
				</view>
				<view class="order_amount_item">
					<view class="order_amount_item_label">总运费</view>
					<view class="order_amount_item_value fontblod">¥{{ Number(orderDetailsFnc.orderData.expressFee) }}
					</view>
				</view>
				<view class="split_line"></view>
				<view class="order_amount_item">
					<view class="order_amount_item_label">合计</view>
					<view class="order_amount_item_value fontblod color_primary">
						¥{{ orderDetailsFnc.orderData.totalMoney }}</view>
				</view>
			</view>
			<view class="card_box order_amount order_info">
				<view class="order_amount_item">
					<view class="order_amount_item_label">订单编号</view>
					<view class="order_amount_item_value">
						{{ orderDetailsFnc.orderData.id }}
						<text @tap="orderBtnFnc.copyText(orderDetailsFnc.orderData.id)">复制</text>
					</view>
				</view>
				<view class="order_amount_item">
					<view class="order_amount_item_label">下单时间</view>
					<view class="order_amount_item_value">{{ orderDetailsFnc.orderData.createTime }}</view>
				</view>
				<view class="order_amount_item"
					v-if="orderDetailsFnc.orderData.status != 0 && orderDetailsFnc.orderData.paymentInfoVO">
					<view class="order_amount_item_label">支付时间</view>
					<view class="order_amount_item_value">{{ orderDetailsFnc.orderData.paymentInfoVO.paymentTime }}
					</view>
				</view>
				<view class="order_amount_item" v-if="orderDetailsFnc.orderData.paymentInfoVO">
					<view class="order_amount_item_label">支付方式</view>
					<view class="order_amount_item_value">
						{{ payText(orderDetailsFnc.orderData.paymentInfoVO.paymentType) }}支付
					</view>
				</view>
				<view class="order_amount_item" v-if="orderDetailsFnc.orderData.logisticoLcus != null">
					<view class="order_amount_item_label">发货时间</view>
					<view class="order_amount_item_value">{{ orderDetailsFnc.orderData.logisticoLcus[0].deliveryTime }}
					</view>
				</view>
				<view class="order_amount_item" v-if="orderDetailsFnc.orderData.completeTime">
					<view class="order_amount_item_label">完成时间</view>
					<view class="order_amount_item_value">{{ orderDetailsFnc.orderData.completeTime }}</view>
				</view>
			</view>
		</view>
		<image @tap="orderBtnFnc.handleContact('400-154-1313')" class="kefu"
			src="https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-126.png" mode="widthFix"></image>
		<view class="bottom_btn" v-if="orderDetailsFnc.source != 1">
			<!-- <view class="bottom_btn_left" @tap="orderBtnFnc.handleContact('400-154-1313')">联系客服</view> -->
			<view class="bottom_btn_right">

				<!-- 待付款 -->
				<template v-if="[0].includes(Number(orderDetailsFnc.orderData.status))">
					<view class="xjs-btn-primary payment_btn" @tap="orderBtnFnc.goPayment(orderDetailsFnc.orderData)">
						去付款
						<text>{{ countdowns.time }}</text>
					</view>
					<view class="xjs-btn-primary-plain" @tap="orderBtnFnc.cancelOrder(orderDetailsFnc.orderId)">取消订单
					</view>

				</template>
				<!-- 已发货 -->
				<template v-if="[2].includes(Number(orderDetailsFnc.orderData.status))">
					<view class="xjs-btn-primary" @tap="orderBtnFnc.confirmDelivery(orderDetailsFnc.orderId)">确认收货
					</view>
					<view class="xjs-btn-primary-plain" @tap="orderBtnFnc.seeLogistics(orderDetailsFnc.orderData.id)">
						查看物流</view>
				</template>
				<!-- 已关闭 -->
				<template v-if="[4].includes(Number(orderDetailsFnc.orderData.status))">
					<view class="xjs-btn-primary-plain" @tap="orderBtnFnc.buyAgain(orderDetailsFnc.orderData)">再次购买
					</view>
					<view class="xjs-btn-primary-plain" @tap="orderBtnFnc.deleteOrder(orderDetailsFnc.orderData.id)">删除
					</view>
				</template>
				<!-- 再次购买按钮 -->
				<template v-if="![0,4].includes(Number(orderDetailsFnc.orderData.status))">
					<view class="xjs-btn-primary-plain" @tap="orderBtnFnc.buyAgain(orderDetailsFnc.orderData)">再次购买
					</view>
				</template>
			</view>
		</view>
		<!-- 支付 -->
		<paymentPopup ref="paymentPopupRef" @cancel="paymentFun.payFail" @confirm="paymentFun.paySuccess"
			@fail="paymentFun.payFail"></paymentPopup>
		<!-- 支付 -->
	</view>
</template>
<script lang="ts" setup>
	import { reactive, ref, onUnmounted } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import api from "@/api";
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
	import { getPresalesDelivery } from "@/pages/shopping/cart/util/cart.js";
	import { useCartStoreToRefs, useCartStore } from "@/store/useCartStore";
	import { accredit } from "@/hooks/useAppPermission/index";
	import { useStudioStoreToRefs } from "@/store/useStudioStore";
	import { formatTime, birthToAgeDiff } from "@/hooks/useFunction";
	let { studioBalance, studio, identity } = useStudioStoreToRefs();
	const { addCart } = useCartStore();
	const iconUrl = ref("https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/icon-");
	const flay = ref(true);
	onLoad(async (options) => {
		orderDetailsFnc.orderId = options.orderId;
		if (options.source) {
			orderDetailsFnc.source = options.source;
		}
	});
	onShow(async () => {
		await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
		await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
		await uni.setNavigationBarTitle({
			title: orderDetailsFnc.orderData.statusText
		});
	});
	//-- 支付
	const paymentPopupRef = ref();
	const paymentFun = reactive({
		paySuccess: () => {
			paymentPopupRef.value.close();
			orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
			orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
		},
		payFail: () => { },
		submit: (item) => {
			paymentPopupRef.value.open({
				orderId: item.id,
				payAmount: item.totalMoney,
				payBusinessType: 3,
				checkOrderType: "shopping"
			});
		}
	});
	// -- 支付
	const orderDetailsFnc = reactive({
		orderId: "",
		source: 0,
		timeL: '',
		orderData: {},
		addressInfo: {},
		/* 订单数据 */
		getOrderData: async (orderId) => {
			const res : any = await api({
				method: "get",
				url: `/mall/shopping/order/new/${orderId}`
			});
			if (res.data) {
				let statusText = "";
				switch (Number(res.data.status)) {
					case 0:
						statusText = "待付款";
						break;
					case 1:
						statusText = "待发货";
						break;
					case 2:
						statusText = "待收货";
						break;
					case 3:
						statusText = "已完成";
						break;
					case 4:
					case 7:
						statusText = "已关闭";
						break;
					case 5:
						statusText = "已取消";
						break;
					case 6:
						statusText = "已退款";
						break;
				}
				res.data.statusText = statusText;
				res.data.orderGoodsBrandsVO.forEach((item) => {
					item.subtotal = Number(item.expressFee);
					item.orderGoods.forEach((item2) => {
						item.subtotal = item.subtotal + Number(item2.price) * Number(item2.count);
						if (item2.spotDeliveryTypeMsg) {
							if (item2.spotDeliveryTypeMsg.substr(0, 1) == 0) {
								item2.spotMsg = item2.spotDeliveryTypeMsg.substr(1, item2.spotDeliveryTypeMsg.length);
								item2.spotMsg = `${item2.spotMsg ? item2.spotMsg.split(",")[0].split(":")[0] : 15}点前下单当天发货，${item2.spotMsg ? item2.spotMsg.split(",")[0].split(":")[0] : 15
									}
								点后的订单次日发货${item2.spotMsg && item2.spotMsg.split(",")[1] == 1 ? "周末及法定节假日顺延" : ""}`;
							} else {
								//item2.spotMsg=item2.spotDeliveryTypeMsg;
								item2.spotMsg = item2.spotDeliveryTypeMsg.substr(1, item2.spotDeliveryTypeMsg.length);
							}
						}
					});
				});
				orderDetailsFnc.orderData = res.data || {};
				if (orderDetailsFnc.orderData.status === 0) {
					if (orderDetailsFnc.orderData.orderAutoCancelTime) {
						const duration = formatTime(orderDetailsFnc.orderData.orderAutoCancelTime).getTime() - Date.now();
						if (duration > 0) {
							onCountdownCheck();
						}
					}
				}
			}
		},
		/* 修改地址信息数据 */
		updateAddress: async (orderId) => {
			const res : any = await api({
				method: "get",
				url: `/mall/shopping/order/new/updateAddress/${orderId}`
			});
			orderDetailsFnc.addressInfo = res.data || {};
			console.log(orderDetailsFnc.addressInfo);
		},
		goModifyAddress: async () => {
			uni.navigateTo({
				url: `/pages/shopping/modifyAddress/index?orderId=${orderDetailsFnc.addressInfo.id}`
			});
		},
		goModifyAddressDetails: async () => {
			uni.navigateTo({
				url: `/pages/shopping/modifyAddressDetails/index?orderId=${orderDetailsFnc.orderId}`
			});
		}
	});
	const orderBtnFnc = reactive<any>({
		/* 	取消 */
		cancelOrder: async (orderId) => {
			uni.showModal({
				title: "取消订单",
				content: "订单还未付款，确定要取消吗？",
				confirmText: "再考虑下",
				cancelText: "取消订单",
				confirmColor: "#FF6084",
				success: async (res) => {
					if (res.confirm) {
					} else if (res.cancel) {
						const res : any = await api({
							method: "POST",
							url: `/mall/shopping/order/iterat/cancel`,
							data: {
								id: orderId
							}
						});
						if (res.data) {
							toastfnc("取消成功！");
							await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
							await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
						} else {
							toastfnc("取消失败！原因:" + `${res.data.msg}`);
							await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
							await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
						}
					}
				}
			});
		},
		/* 付款 */
		goPayment: async (item) => {
			paymentFun.submit(item);
		},
		/* 查看物流 */
		seeLogistics: async (orderId) => {
			uni.navigateTo({
				url: `/pages/shopping/logisticsDetails/index?orderId=${orderId}`
			});
		},
		/* 确认收货 */
		confirmDelivery: async (orderId) => {
			uni.showModal({
				title: "确认收货",
				content: "确认商品已收到？",
				confirmText: "确认",
				cancelText: "取消",
				confirmColor: "#FF6084",
				success: async (res) => {
					if (res.confirm) {
						const res : any = await api({
							method: "POST",
							url: `/mall/shopping/order/completed/${orderId}`
						});
						if (res.data) {
							toastfnc("确认收货成功！");
							await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
							await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
						} else {
							toastfnc("确认收货失败！原因:" + `${res.data.msg}`);
							await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
							await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
						}
					} else if (res.cancel) {
					}
				}
			});
		},
		/* 修改地址 */
		modifyAddress: async () => {
			uni.navigateTo({
				url: `/pages/shopping/modifyAddress/index?orderId=${orderDetailsFnc.addressInfo.id}`
			});
		},
		/* 删除订单 */
		deleteOrder: async (orderId) => {
			uni.showModal({
				title: "确认删除订单？",
				content: "删除后订单不可恢复",
				confirmText: "确认删除",
				cancelText: "取消",
				confirmColor: "#FF6084",
				success: async (res) => {
					if (res.confirm) {
						const res : any = await api({
							method: "DEL",
							url: `/mall/shopping/order/${orderId}`
						});
						if (res.data) {
							toastfnc("订单删除成功！");
							uni.navigateBack();
						} else {
							toastfnc("订单删除失败！原因:" + `${res.data.msg}`);
							uni.navigateBack();
						}
					} else if (res.cancel) {
					}
				}
			});
		},
		// 联系客服
		handleContact: async (item) => {
			// #ifdef APP
			const status = await accredit("CALL_PHONE");
			if (status != 1) return;
			// #endif
			uni
				.showModal({
					title: "提示",
					content: "客服上班时间：周一到周六 09:30~18:30",
					confirmText: "确定呼叫"
				})
				.then((e) => {
					console.log(e);
					if (e.confirm) {
						uni.makePhoneCall({
							phoneNumber: item
						});
					}
				});
		},
		/* 再次购买 */
		buyAgain: async (item) => {
			let arr1 = item.orderGoodsBrandsVO[0].orderGoods;
			console.log(item, "item");
			if (item.orderGoodsBrandsVO[0].orderGoods.isDelete == 1) {
				toastfnc("暂不支持再次购买！");
				return;
			} else {
				const res : any = await api({
					method: "GET",
					url: `/mall/shopping/order/new/getIsBuyOrderGoods/${orderDetailsFnc.orderId}`
				});
				if (res.data) {
					if (res.code === 0) {
						arr1.forEach((item) => {
							res.data.forEach((citem) => {
								if (item.id == citem.orderGoodsId) {
									item.isBuy = citem.isBuy;
									item.zsStatus = citem.status;
								}
							});
						});
						btnVerification(arr1);
					}
				} else {
					toastfnc(res.msg);
				}
			}
		},
		copyText: (data) => {
			uni.setClipboardData({
				data,
				success: () => {
					toastfnc("复制成功");
				}
			});
		}
	});
	const deliveryDate = (goodInfo) => {
		const presalesDelivery = getPresalesDelivery(goodInfo);
		if (presalesDelivery) {
			return presalesDelivery;
		} else if (goodInfo.spotDeliveryTypeMsg) {
			return goodInfo.spotMsg;
		}
	};
	const countdowns = reactive({
		timer: null,
		time: "",
		once: false
	});
	const onCountdownCheck = async () => {
		if (countdowns.timer) clearTimeout(countdowns.timer);
		const duration = formatTime(orderDetailsFnc.orderData.orderAutoCancelTime).getTime() - Date.now();
		console.log(duration);
		if (duration > 0) {
			if (!countdowns.once) countdowns.once = true;
			countdowns.time = onCountdownTransform(duration);
			countdowns.timer = setTimeout(onCountdownCheck, 1000);
		} else {
			uni.showModal({
				title: "提示",
				content: "订单状态已变更",
				showCancel: false,
				success: () => {
					uni.navigateBack();
				}
			});
			countdowns.time = "";
			await orderDetailsFnc.getOrderData(orderDetailsFnc.orderId);
			await orderDetailsFnc.updateAddress(orderDetailsFnc.orderId);
			await uni.setNavigationBarTitle({
				title: orderDetailsFnc.orderData.statusText
			});
		}
	};

	const onCountdownTransform = (duration) => {
		const hour = Math.floor(duration / (1000 * 60 * 60));
		const minute = Math.floor((duration - hour * 1000 * 60 * 60) / (1000 * 60));
		const seconds = Math.floor((duration % (1000 * 60)) / 1000);
		if (Number(hour) > 0) {
			return `${hour.toString().padStart(2, "0")}时${minute.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
		} else if (Number(minute) > 0) {
			return `${minute.toString().padStart(2, "0")}分${seconds.toString().padStart(2, "0")}秒`;
		} else if (Number(seconds) > 0) {
			return `${seconds.toString().padStart(2, "0")}秒`;
		}
	};
	//加入购物车或立即购买前的验证
	const btnVerification = async (item) => {
		let arr = [];
		for (let i = 0; i < item.length; i++) {
			if (!item[i].isBuy || item[i].zsStatus != 1) {
				let goodsInfo = {};
				goodsInfo.amount = item[i].count;
				goodsInfo.skuCode = item[i].skuCode;
				goodsInfo.id = item[i].goodsId;
				if (item[i].isLettering == 1) {
					goodsInfo.letteringMsg = item[i].letteringMsg;
				} else {
					goodsInfo.letteringMsg = "";
				}
				arr.push(goodsInfo);
			}
		}
		if (arr.length == 0) {
			toastfnc("暂不支持再次购买！");
			return;
		}
		if (flay.value) {
			flay.value = false;
			const params = {
				addType: 1,
				arr: arr,
				ifRadio: false,
				isWaiting: true,
				arrType: 1
			};
			const res : any = await addCart(params);
			if (res.code == 0) {
				toastfnc("加入购物车成功！");
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/shopping/cart/index"
					});
				}, 1000);
			}
			flay.value = true;
		}
	};
	const payText = (payType) => {
		let text = "";
		switch (Number(payType)) {
			case 1:
				text = "抖音";
				break;
			case 2:
				text = "支付宝";
				break;
			case 3:
				text = "微信";
				break;
		}
		return text;
	};
	const toastfnc = (tipsText : string) => {
		uni.showToast({
			title: tipsText,
			icon: "none"
		});
	};
	onUnmounted(() => {
		if (countdowns.timer) clearTimeout(countdowns.timer);
	});
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 140rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
		min-height: 100vh;
		background-color: #f9f6f6;
	}

	.content {
		width: 686rpx;
		margin: 0 auto;
		padding-top: 32rpx;
	}

	.card_box {
		margin-bottom: 32rpx;
		padding: 32rpx;
		border-radius: 24rpx;
		background-color: #fff;
		line-height: 1;
	}

	.receiving_address {
		display: flex;
		justify-content: space-between;

		.receiving_address_left {
			image {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}

		.receiving_address_right {
			width: 582rpx;

			.receiving_address_text {
				margin-bottom: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.receiving_address_text_left {
					width: 480rpx;
					font-size: 32rpx;
					color: #1a1a1a;
					font-weight: bold;
					line-height: 1.4;
				}

				.receiving_address_text_left_width {
					width: 100%;
				}

				.receiving_address_text_right {
					margin-top: 8rpx;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					color: #ff6084;
				}

				.no_btn {
					width: 68rpx;
				}
			}

			.receiving_address_user {
				font-size: 26rpx;
				color: #808080;
			}

			.receiving_address_tips {
				display: flex;
				justify-content: space-between;
				margin-top: 32rpx;
				font-size: 24rpx;
				color: #ff5253;

				view {
					width: 554rpx;
				}
			}
		}
	}

	.remark {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		line-height: 1.4;
		font-size: 28rpx;

		.remark_tips {
			color: #808080;
		}

		.remark_content {
			width: 540rpx;
			word-break: break-all;
			color: #1a1a1a;
		}
	}

	.logistics_info {
		.logistics_info_text {
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			//justify-content: space-between;

			.logistics_info_icon {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;

			}

			.logistics_info_left {
				width: 554rpx;
				display: flex;
				align-items: center;
			}

			.logistics_info_tips {
				font-size: 32rpx;
				color: #ff6084;
				font-weight: bold;
			}

			.logistics_info_split {
				margin: 0 12rpx;
				width: 2rpx;
				height: 28rpx;
				background-color: #cacccc;
			}

			.logistics_info_content {
				width: 400rpx;
				font-size: 32rpx;
				color: #1b2120;
				font-weight: bold;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				/* 限制显示的行数为2 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.logistics_info_times {
			margin-left: 56rpx;
			font-size: 26rpx;
			color: #808080;
		}
	}

	.goods_box {
		.shop_name {
			margin-bottom: 48rpx;
			display: flex;
			align-items: center;

			image {
				margin-right: 16rpx;
				width: 40rpx;
				height: 40rpx;
				border-radius: 4rpx;
				flex-shrink: 0;
			}

			text {
				font-size: 32rpx;
				color: #1b2120;
				font-weight: bold;
			}
		}

		.goods_info {
			.goods_info_item {
				/* margin-top: -6rpx; */
				margin-bottom: 34rpx;
				display: flex;
				justify-content: space-between;

				.goods_info_item_img {
					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 24rpx;
					}
				}

				.goods_info_item_text {
					width: 438rpx;

					.goods_info_item_text_name {

						margin-bottom: 10rpx;
						display: flex;
						justify-content: space-between;
						font-size: 30rpx;

						.goods_info_item_text_name_tips {
							margin-top: -6rpx;
							width: 322rpx;
							color: #1b2120;
							line-height: 1.4;
							word-break: break-all;
							text {
								display: inline-block;
								margin-top: 4rpx;
								margin-right: 4rpx;
								width: 64rpx;
								height: 32rpx;
								border-radius: 20rpx;
								border: 1rpx solid #6363ff;
								line-height: 34rpx;
								text-align: center;
								color: #6363ff;
								font-size: 24rpx;
								font-weight: normal;
							}
							font-size: 30rpx;
							color: #1B2120;
						}

						.item_text_price {
							color: #ff6084;
							font-weight: bold;
						}
					}

					.goods_info_item_text_specs {
						/* margin-top: -12rpx; */
						//margin-bottom: 32rpx;
						margin-bottom: 26rpx;
						display: flex;
						justify-content: space-between;

						view {
							width: 322rpx;
							font-size: 26rpx;
							color: #7c807f;
						}
					}

					.goods_info_item_text_times {
						/* margin-top: -6rpx; */
						width: 322rpx;
						font-size: 24rpx;
						color: #6363ff;
						line-height: 1.4;
					}
				}
			}

			.goods_info_item:last-child {
				margin-bottom: 0;
			}
		}

		.goods_bottom_item {
			display: flex;
			justify-content: space-between;

			.goods_bottom_item_label {
				font-size: 26rpx;
				color: #5c5e5e;
			}

			.goods_bottom_item_value {
				width: 438rpx;
				font-size: 30rpx;
				text-align: right;

				text {
					text-decoration: line-through;
					margin-right: 16rpx;
				}
			}

			.color80 {
				color: #808080;
			}

			.color7c {
				color: #7c807f;
			}

			.color1a {
				color: #1a1a1a;
			}
		}

		.shipping_fee {
			margin-top: 42rpx;
		}

		.order_notes {
			margin-top: 46rpx;
			line-height: 1.4;
		}
	}

	.order_amount {
		line-height: 1;

		.order_amount_item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order_amount_item_label {
				font-size: 26rpx;
				color: #5c5e5e;
			}

			.order_amount_item_value {
				font-size: 30rpx;
				color: #1a1a1a;
			}

			.color_primary {
				color: var(--color-primary);
			}
		}

		.split_line {
			margin: 32rpx 0;
			width: 100%;
			height: 1rpx;
			background-color: #e6e6e6;
		}

		.mt24 {
			margin-bottom: 48rpx;
		}

		.fontblod {
			font-weight: bold;
		}
	}

	.order_info {
		.order_amount_item {
			margin-bottom: 48rpx;
		}

		text {
			margin-left: 8rpx;
			display: inline-block;
			padding: 8rpx 16rpx;
			background-color: #ff6084;
			color: #fff;
			font-size: 24rpx;
			border-radius: 32rpx;
		}

		.order_amount_item:last-child {
			margin-bottom: 0;
		}
	}

	.kefu {
		width: 68px;
		height: 68px;
		// box-shadow: 0px 0px 16rpx 0px rgba(147,107,108,0.12);
		// border-radius: 50%;
		bottom: calc(var(--safe-area-bottom) + 150rpx);
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 8rpx 32rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 8rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 8rpx);
		width: 100%;
		box-sizing: border-box;
		background-color: #fff;
		border-top: 1rpx solid #cccccc;
		/* display: flex;
		justify-content: space-between;
		align-items: center; */

		/* .bottom_btn_left {
			font-size: 28rpx;
			color: #1B2120;
		} */

		.bottom_btn_right {
			display: flex;
			align-items: center;
			flex-direction: row-reverse;

			view {
				margin-left: 8rpx;
				width: 222rpx;
			}

			.payment_btn {
				flex-direction: column;

				text {
					font-size: 22rpx;
				}
			}
		}
	}

	.order_data_info_box {
		width: 100%;
		background: #ffffff;
		border-radius: 24rpx;

		.income_structure {
			font-weight: bold;
			font-size: 28rpx;
			color: #5c5e5e;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #e4e6e6;
			margin-bottom: 32rpx;
		}

		.order_data_info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 32rpx;

			.order_data_label {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #5c5e5e;
			}

			.studio_img {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			.order_data_value {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #1b2120;
				line-height: 1;

				.order_data_value_text {
					font-weight: 400;
					font-size: 28rpx;
					color: #1b2120;
				}

				.dividing_line {
					width: 2rpx;
					height: 28rpx;
					margin: 0 20rpx;
					background: #1b2120;
				}

				.copy_btn {
					font-weight: 400;
					font-size: 28rpx;
					color: #ff6084;
					text-decoration-line: underline;
				}
			}
		}

		.order_data_info:last-child {
			margin-bottom: 0;
		}

		.user_income {
			padding-top: 17px;
			border-top: 1px solid #e4e6e6;
		}

		.order_total {
			font-weight: bold;
			padding-top: 30rpx;
			border-top: 1px solid #e4e6e6;

			.order_data_label,
			.order_data_value {
				color: #1b2120;
				font-weight: bold;
			}
		}
	}
</style>